import React, { Component } from 'react';
import { getList } from '../../api'
import style from './index.module.scss'
console.log(style);
class Index extends Component {
  state = {
    list: []
  }
  // 获取数据 同时设置
  async getListAndSet() {
    const resp = await getList()
    this.setState({
      list: resp.data.data
    })
  }
  // 加入购物车函数
  addCarItem(v) {
    /**
     * 1. 先获取本地购物车数据 一定是一个数组类型
     * 
     * 2. 去重 通过ID是否存在相同商品  存在数量+1  不存在推入新数据, 数量初始值1
     * 
     * 3. 保存本地存储
     * */
    //  先获取本地购物车数据 一定是一个数组类型
    const car = JSON.parse(localStorage.getItem('car')) || []
    // 去重 通过ID是否存在相同商品  存在数量+1  不存在推入新数据, 数量初始值1
    const item = car.find(item => item.id === v.id)
    if (item) {
      // 存在数量+1 
      item.count++
    } else {
      // 不存在推入新数据, 数量初始值1
      car.push({
        ...v,
        count: 1,
        isChecked: false,
      })
    }
    // 保存本地存储
    localStorage.setItem('car', JSON.stringify(car))
  }
  render() {
    const { list } = this.state
    return (
      <div>
        {
          list.map((v, i) => {
            return (
              <dl key={i} className={ style.dl}>
                <dt>
                  <img src={v.url} alt="" />
                </dt>
                <dd>
                  <h3>{v.title}</h3>
                  <p>{v.price}</p>
                  <button onClick={() => this.addCarItem(v)}>加入购物车</button>
                </dd>
              </dl>
            )
          })
        }
      </div>
    );
  }
  componentDidMount() {
    this.getListAndSet()
  }
}

export default Index;
